<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../case/case.css">
  <link rel="stylesheet" href="../index/index.css">
  <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
  <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> </script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
  <script src="../js/jquery.min.js"></script>
</head>

<body>
  <div class="box">
    <div id="index">
      <!-- logo -->
      <div class="index-top">
        <img src="../image/logo.png" alt="" srcset="">
        <div class="top-right">
          <img src="../image/电话01-F.png" alt="" srcset="">
          <div class="top-text">咨询我们：12345678900</div>
        </div>
      </div>
      <!-- 导航 -->
      <div class="index-nav">
        <div class="index-nav1">
          <div class="nav1"><a href="../index/index.html">首页</a></div>
          <div class="nav1"><a href="../site/site.html">网站开发</a></div>
          <div class="nav1"><a href="../app/app.html">APP开发</a></div>
          <div class="nav1"><a href="../procedure/procedure.html">小程序开发</a></div>
          <div class="nav1"><a href="#">案例</a></div>
          <div class="nav1"><a href="../mine/mine.html">关于我们</a></div>
        </div>
      </div>
    </div>

    
    <!-- 页面轮播 -->
    <div class="navswiper">
      <div class="swiper mySwiper">
        <div class="swiper-wrapper">
          <img class="image" src="../image/swiper.png" alt="">
          <img class="image" src="../image/swiper.png" alt="">
          <img class="image" src="../image/swiper.png" alt="">
        </div>
      </div>
    </div>
    <!-- 案例 -->
    <div class="box1">
      <div class="tabbox">
        <div id="tabNav">
          <div class="active">APP/小程序 开发</div>
          <div>网站开发</div>
        </div>
        <div class="content">
          <div class="active">
            <div class="taball">
              <div class="swiper-container">
                <div class="swiper-wrapper">
                  <div class="swiper-slide"><a href="../caselist/caselist.html"><img src="../image/app1.png" alt=""></a>
                  </div>
                  <div class="swiper-slide"><a href="../caselist/caselist.html"><img src="../image/app2.png" alt=""></a>
                  </div>
                  <div class="swiper-slide"><a href="../caselist/caselist.html"><img src="../image/app3.png" alt=""></a>
                  </div>
                  <div class="swiper-slide"><a href="../caselist/caselist.html"><img src="../image/app1.png" alt=""></a>
                  </div>
                  <div class="swiper-slide"><a href="../caselist/caselist.html"><img src="../image/app2.png" alt=""></a>
                  </div>
                  <div class="swiper-slide"><a href="../caselist/caselist.html"><img src="../image/app3.png" alt=""></a>
                  </div>
                  <div class="swiper-slide"><a href="../caselist/caselist.html"><img src="../image/app1.png" alt=""></a>
                  </div>
                  <div class="swiper-slide"><a href="../caselist/caselist.html"><img src="../image/app2.png" alt=""></a>
                  </div>
                  <div class="swiper-slide"><a href="../caselist/caselist.html"><img src="../image/app3.png" alt=""></a>
                  </div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
              </div>
            </div>
          </div>
          <div>
            <div class="taball">
              网站开发
            </div>
          </div>
        </div>
      </div>
    </div>
    </div>
    <!-- 脚部 -->
    <div id="index">
      <div class="footer">
        <div class="footer-title">
          <div class="footer1">
            <p>山东柏瑞设计有限公司</p>
            <p>联系电话：123456678900</p>
            <p>地址 济南创新谷2号楼孵化器五楼(长清区海棠路与芙蓉路交叉路口东南)</p>
          </div>
          <div class="footer-img">
            <img src="../image/二维码.png" alt="" srcset="">
            <p>微信公众号</p>
          </div>
        </div>
      </div>
      <div class="foot">
        Shandong Bairui Software Technology Co.,Ltd.山东拍瑞软件科技有限公司版权所有鲁ICP备17006298号-1
      </div>
    </div>


  <script>
    var swiper = new Swiper(".mySwiper", {
      // autoplay: {
      //   delay: 20000
      // },
      loop: true
    });

    var swiper1 = new Swiper('.swiper-container', {
      pagination: '.swiper-pagination',
      slidesPerView: 3,
      slidesPerColumn: 2,
      paginationClickable: true,
      spaceBetween: 30
    });

  </script>
  <!-- 选项卡切换 -->
  <script>
    $(function () {
      $(".tabbox div").click(function () {
        //获取点击的元素给其添加样式，讲其兄弟元素的样式移除
        $(this).addClass("active").siblings().removeClass("active");
        //获取选中元素的下标
        var index = $(this).index();
        console.log($(this));
        $(this)
          .parent()
          .siblings()
          .children()
          .eq(index)
          .addClass("active")
          .siblings()
          .removeClass("active");
      });
    });
  </script>
  </div>
</body>

</html>